<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <style>
        *{
            margin: 0;padding: 0;
        }
        .slide-out-top {
	-webkit-animation: slide-out-top 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
	        animation: slide-out-top 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
}
@-webkit-keyframes slide-out-top {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateY(-1000px);
            transform: translateY(-1000px);
    opacity: 0;
  }
}
@keyframes slide-out-top {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateY(-1000px);
            transform: translateY(-1000px);
    opacity: 0;
  }
}
     .box{
        width: 100px;
        height: 200px;
        background-color: black;
        border: 1px solid #9999;
        color: white;
        text-align: center;
        line-height: 200px;
        float: left;
        margin-left: 20px;
        font-size: 20px;
     }
     .nav{
        width: 1200px;
        height: 800px;
        margin: auto;
        margin-top: 200px;
     }
    </style>
    <div class="nav">
        <div id="slide1" class="box">

        </div>
        <div id="slide2" class="box">
          
        </div>
        <div id="slide3" class="box">
          
        </div>
        <div id="slide4" class="box">
          
        </div>
        <div id="slide5" class="box">
          
        </div>
        <div id="slide6" class="box">
          
        </div>
        <div id="slide7" class="box">
          
        </div>
        <div id="slide8" class="box">
          
        </div>
    </div>
   
   
</body>
<script>
    $(function(){
         setInterval(function () {
                var time = new Date()
                var hours = JSON.stringify(time.getHours())
                hours=hours<10 ?'0'+hours :hours

                var minutes =JSON.stringify( time.getMinutes())
                minutes=minutes<10 ?'0'+minutes :minutes

                var miao =JSON.stringify( time.getSeconds())
                miao=miao<10 ?'0'+miao :miao
               
              
                $('#slide1').text(hours[0])
                $('#slide2').text(hours[1])
                $('#slide3').text(':')
                $('#slide4').text(minutes[0])
                $('#slide5').text(minutes[1])
                $('#slide6').text(":")
                $('#slide7').text(miao[0])
                $('#slide8').text(miao[1])
                if ($('#slide8').text() === '0'){
                $('#slide7').addClass('slide-out-top')
                console.log(4);
            }
            },1000)
            setInterval(function(){
                $('#slide8').toggleClass('slide-out-top')
            },1000)
            setInterval(function(){
                if ($('#slide8').text() === '1'){
                $('#slide7').removeClass('slide-out-top')
                console.log(5);
            }
            },1000)
           
    })
    
       
</script>
</html>